<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <!-- 导航 -->
    <div class="container-fluid">
      <nav class="navbar fixed-top navbar-light bg-light">
        <div class="container justify-content-start" style="width: 900px">
          <a class="navbar-brand" href="#" style="margin-right: 130px">
            <img
              src="/images/首页切图/smingtechlogo.png"
              alt=""
              width="120"
              height="35"
            />
          </a>
          <ul class="nav">
            <li class="nav-item position-relative">
              <a class="nav-link active" aria-current="page" href="#" style="color: black"
                >首页</a
              >
              <!-- 字下方的小蓝条 -->
              <p
                class="position-absolute"
                style="
                  width: 60%;
                  border-bottom: 5px rgb(7, 117, 221) solid;
                  top: 90%;
                  left: 50%;
                  transform: translateX(-50%);
                "
              ></p>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" style="color: black">产品及解决方案</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./about.html" style="color: black">关于赛鸣</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./join.html" style="color: black">加入我们</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <!-- 首页轮播图 -->
    <div class="container-fluid">
      <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <ol class="carousel-indicators">
          <li
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="0"
            class="active"
          ></li>
          <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img
              src="./images/首页切图/home page_banner.jpg"
              class="d-block w-100"
              alt="..."
            />
            <div class="carousel-caption d-none d-md-block">
              <h5>以数字技术助力企业腾飞</h5>
              <p>数字化转型解决方案服务商</p>
            </div>
          </div>
          <div class="carousel-item">
            <img
              src="./images/首页切图/home page_bannerbg.jpg"
              class="d-block w-100"
              alt="..."
            />
            <div class="carousel-caption d-none d-md-block">
              <h5>以数字技术助力企业腾飞</h5>
              <p>数字化转型解决方案服务商</p>
            </div>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselExampleIndicators"
          role="button"
          data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselExampleIndicators"
          role="button"
          data-bs-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </a>
      </div>
    </div>
    <!-- 优秀解决方案  section1 -->
    <div class="container-fluid section1">
      <div class="container" style="width: 900px">
        <div class="section-title">
          <h2>优秀解决方案</h2>
          <p></p>
        </div>
        <div class="row row-cols-1 row-cols-md-4 g-1">
          <div class="col" id="section1Col1">
            <div class="card position-relative">
              <img
                src="./images/首页切图/解决方案图片/安全生产监督管控平台.png"
                class="card-img-top"
                alt="..."
              />
              <div
                class="card-footer position-absolute bottom-0 start-50 translate-middle-x w-100 text-white bg-dark opacity-75"
              >
                <h6 class="text-center">安全生产智慧管控平台</h6>
              </div>
              <!-- 鼠标移入显示文字 -->
              <div
                id="cardBackText1"
                class="cardBackText cardBack position-absolute bg-white opacity-100 w-100 h-100 overflow-hidden"
              >
                <p class="text-center fs-5 pt-5">企业数字化管理平台</p>
                <h6 class="lh-base px-3 pt-1" style="font-size: 14px">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bootstrap是美国Twitter公司的设计师Mark
                  Otto和Jacob Thornton合作基于HTML、CSS、JavaScript
                  开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
                </h6>
              </div>
            </div>
          </div>
          <div class="col" id="section1Col2">
            <div class="card position-relative">
              <img
                src="./images/首页切图/解决方案图片/企业数字化运营管理平台.png"
                class="card-img-top"
                alt="..."
              />
              <div
                class="card-footer position-absolute bottom-0 start-50 translate-middle-x w-100 text-white bg-dark opacity-75"
              >
                <h6 class="text-center">安全生产智慧管控平台</h6>
              </div>

              <div
                id="cardBackText2"
                class="cardBackText cardBack position-absolute bg-white opacity-100 w-100 h-100 overflow-hidden"
              >
                <p class="text-center fs-5 pt-5">企业数字化管理平台</p>
                <h6 class="lh-base px-3 pt-1" style="font-size: 14px">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bootstrap是美国Twitter公司的设计师Mark
                  Otto和Jacob Thornton合作基于HTML、CSS、JavaScript
                  开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
                </h6>
              </div>
            </div>
          </div>
          <div class="col" id="section1Col3">
            <div class="card position-relative">
              <img
                src="./images/首页切图/解决方案图片/智慧房产管理平台.png"
                class="card-img-top"
                alt="..."
              />
              <div
                class="card-footer position-absolute bottom-0 start-50 translate-middle-x w-100 text-white bg-dark opacity-75"
              >
                <h6 class="text-center">安全生产智慧管控平台</h6>
              </div>

              <div
                id="cardBackText3"
                class="cardBackText cardBack position-absolute bg-white opacity-100 w-100 h-100 overflow-hidden"
              >
                <p class="text-center fs-5 pt-5">企业数字化管理平台</p>
                <h6 class="lh-base px-3 pt-1" style="font-size: 14px">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bootstrap是美国Twitter公司的设计师Mark
                  Otto和Jacob Thornton合作基于HTML、CSS、JavaScript
                  开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
                </h6>
              </div>
            </div>
          </div>
          <div class="col" id="section1Col4">
            <div class="card position-relative">
              <img
                src="./images/首页切图/解决方案图片/智慧车辆管控平台.png"
                class="card-img-top"
                alt="..."
              />
              <div
                class="card-footer position-absolute bottom-0 start-50 translate-middle-x w-100 text-white bg-dark opacity-75"
              >
                <h6 class="text-center">安全生产智慧管控平台</h6>
              </div>

              <div
                id="cardBackText4"
                class="cardBackText cardBack position-absolute bg-white opacity-100 w-100 h-100 overflow-hidden"
              >
                <p class="text-center fs-5 pt-5">企业数字化管理平台</p>
                <h6 class="lh-base px-3 pt-1" style="font-size: 14px">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bootstrap是美国Twitter公司的设计师Mark
                  Otto和Jacob Thornton合作基于HTML、CSS、JavaScript
                  开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
                </h6>
              </div>
            </div>
          </div>
        </div>
        <div class="section1-footer"><a href="#">查看更多解决方案 >></a></div>
      </div>
    </div>
    <!-- 产品系列 -->
    <div
      class="container-fluid bg-secondary"
      style="
        background-image: url(./images/首页切图/chanpin_bg.jpg);
        background-position-x: 100%;
      "
    >
      <div class="container pb-5" style="width: 900px">
        <div class="section-title">
          <h2>产品系列</h2>
          <p></p>
        </div>
        <div class="row row-cols-1 row-cols-md-3 g-4 position-relative">
          <div class="col">
            <div class="card position-relative d-flex">
              <img
                src="./images/首页切图/products_didaima_ico.png"
                class="card-img-top"
                alt="..."
                style="width: 67px; height: 80px; margin: 10px auto"
              />
              <div class="card-body">
                <h5 class="card-title fs-6 text-center">数字化低代码服务平台</h5>
                <p class="card-text" style="width: 213px; height: 120px; font-size: 12px">
                  <span style="padding-bottom: 10px">产品简介</span><br />
                  数字化企业运营管理平台为年销售额2-10亿生产制造企业，目前已与多家企业签订合作
                  协议，合同总额达数亿元...
                </p>
                <a
                  href="#"
                  class="btn btn-primary position-absolute bottom-0 start-50 translate-middle-x"
                  style="
                    margin-bottom: 20px;
                    background-color: rgba(255, 255, 255, 0.5);
                    color: grey;
                  "
                  >详情 >></a
                >
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card position-relative d-flex">
              <img
                src="./images/首页切图/products_budongchan_ico.png"
                class="card-img-top"
                alt="..."
                style="width: 67px; height: 80px; margin: 10px auto"
              />
              <div
                class="card-body"
                style="background-image: url(./images/首页切图/chanpin_select_bg.png)"
              >
                <h5 class="card-title fs-6 text-center">数字化低代码服务平台</h5>

                <p class="card-text" style="width: 213px; height: 120px; font-size: 12px">
                  <span style="padding-bottom: 10px">产品简介</span><br />
                  数字化企业运营管理平台为年销售额2-10亿生产制造企业，目前已与多家企业签订合作
                  协议，合同总额达数亿元...
                </p>
                <a
                  href="#"
                  class="btn btn-primary position-absolute bottom-0 start-50 translate-middle-x"
                  style="
                    margin-bottom: 20px;
                    background-color: rgba(255, 255, 255, 0.5);
                    color: grey;
                  "
                  >详情 >></a
                >
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card position-relative d-flex">
              <img
                src="./images/首页切图/products_didaima_ico.png"
                class="card-img-top"
                alt="..."
                style="width: 67px; height: 80px; margin: 10px auto"
              />
              <div class="card-body">
                <h5 class="card-title fs-6 text-center">数字化低代码服务平台</h5>

                <p class="card-text" style="width: 213px; height: 120px; font-size: 12px">
                  <span style="padding-bottom: 10px">产品简介</span><br />
                  数字化企业运营管理平台为年销售额2-10亿生产制造企业，目前已与多家企业签订合作
                  协议，合同总额达数亿元...
                </p>
                <a
                  href="#"
                  class="btn btn-primary position-absolute bottom-0 start-50 translate-middle-x"
                  style="
                    margin-bottom: 20px;
                    background-color: rgba(255, 255, 255, 0.5);
                    color: grey;
                  "
                  >详情 >></a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务 -->
    <div class="container-fluid">
      <div class="container pb-5 mb-5" style="width: 900px">
        <div class="section-title">
          <h2>我们致力于为您提供专业、优质的服务</h2>
          <p></p>
        </div>
        <div class="row row-cols-5 g-5 position-relative pb-5 mb-5">
          <!--   134 200 -->

          <div class="col">
            <div class="card" style="transform: translateY(60%)">
              <img
                src="./images/首页切图/xuqiu_select_ico.png"
                class="card-img-top"
                alt="..."
                style="width: 100%; height: 120px"
              />
              <div class="card-body">
                <p style="font-size: 16px; margin-top: -30px">项目咨询</p>
                <p style="font-size: 12px">
                  <span
                    style="
                      background-image: url(./images/首页切图/Union_ico.png);
                      width: 10px;
                      height: 10px;
                    "
                  ></span
                  >拥有丰富项目经验
                </p>
                <p style="font-size: 12px">
                  <span
                    style="background-image: url(./images/首页切图/Union_ico.png)"
                  ></span
                  >实施咨询服务
                </p>
              </div>
            </div>
          </div>
          <div
            class="jiantou position-absolute"
            style="top: 100px; transform: translateX(110px); z-index: 100"
          >
            <img src="./images/首页切图/fuwu_arrow.png" alt="" />
          </div>
          <div class="col">
            <div class="card">
              <img
                src="./images/首页切图/xuqiu_select_ico.png"
                class="card-img-top"
                alt="..."
                style="width: 100%; height: 120px"
              />
              <div class="card-body" style="height: 60px">
                <p style="font-size: 16px; margin-top: -30px">项目咨询</p>
                <p style="font-size: 12px">
                  <span
                    style="
                      background-image: url(./images/首页切图/Union_ico.png);
                      width: 10px;
                      height: 10px;
                    "
                  ></span
                  >拥有丰富项目经验
                </p>
                <p style="font-size: 12px">
                  <span
                    style="background-image: url(./images/首页切图/Union_ico.png)"
                  ></span
                  >实施咨询服务
                </p>
              </div>
            </div>
          </div>
          <div
            class="jiantou position-absolute"
            style="top: 130px; left: 30%; transform: rotate(70deg); z-index: 100"
          >
            <img src="./images/首页切图/fuwu_arrow.png" alt="" />
          </div>
          <div class="col">
            <div class="card" style="transform: translateY(60%)">
              <img
                src="./images/首页切图/xuqiu_select_ico.png"
                class="card-img-top"
                alt="..."
                style="width: 100%; height: 120px"
              />
              <div class="card-body">
                <p style="font-size: 16px; margin-top: -30px">项目咨询</p>
                <p style="font-size: 12px">
                  <span
                    style="
                      background-image: url(./images/首页切图/Union_ico.png);
                      width: 10px;
                      height: 10px;
                    "
                  ></span
                  >拥有丰富项目经验
                </p>
                <p style="font-size: 12px">
                  <span
                    style="background-image: url(./images/首页切图/Union_ico.png)"
                  ></span
                  >实施咨询服务
                </p>
              </div>
            </div>
          </div>
          <div
            class="jiantou position-absolute"
            style="top: 100px; left: 40%; transform: translateX(110px); z-index: 100"
          >
            <img src="./images/首页切图/fuwu_arrow.png" alt="" />
          </div>
          <div class="col">
            <div class="card">
              <img
                src="./images/首页切图/xuqiu_select_ico.png"
                class="card-img-top"
                alt="..."
                style="width: 100%; height: 140px"
              />
              <div class="card-body" style="height: 60px">
                <p style="font-size: 16px; margin-top: -30px">项目咨询</p>
                <p style="font-size: 12px">
                  <span
                    style="
                      background-image: url(./images/首页切图/Union_ico.png);
                      width: 10px;
                      height: 10px;
                    "
                  ></span
                  >拥有丰富项目经验
                </p>
                <p style="font-size: 12px">
                  <span
                    style="background-image: url(./images/首页切图/Union_ico.png)"
                  ></span
                  >实施咨询服务
                </p>
              </div>
            </div>
          </div>
          <div
            class="jiantou position-absolute"
            style="top: 130px; left: 70%; transform: rotate(70deg); z-index: 100"
          >
            <img src="./images/首页切图/fuwu_arrow.png" alt="" />
          </div>
          <div class="col">
            <div class="card" style="transform: translateY(60%)">
              <img
                src="./images/首页切图/xuqiu_select_ico.png"
                class="card-img-top"
                alt="..."
                style="width: 100%; height: 120px"
              />
              <div class="card-body">
                <p style="font-size: 16px; margin-top: -30px">项目咨询</p>
                <p style="font-size: 12px">
                  <span
                    style="
                      background-image: url(./images/首页切图/Union_ico.png);
                      width: 10px;
                      height: 10px;
                    "
                  ></span
                  >拥有丰富项目经验
                </p>
                <p style="font-size: 12px">
                  <span
                    style="background-image: url(./images/首页切图/Union_ico.png)"
                  ></span
                  >实施咨询服务
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="container-fluid pt-4" style="background-color: #ced4da">
      <!-- border: 1px solid red -->
      <div class="container pb-5 d-flex" style="width: 900px">
        <div class="row" style="">
          <div class="col-4">
            <ul class="list-group list-group-flush">
              <li class="list-group-item list-group-item-dark">
                <h3 class="title fs-5" style="color: #404c58">优秀产品</h3>
              </li>
              <li class="list-group-item list-group-item-dark">工厂智能平台</li>
              <li class="list-group-item list-group-item-dark">智能教育培训平台</li>
              <li class="list-group-item list-group-item-dark">智能房产</li>
              <li class="list-group-item list-group-item-dark">商城</li>
              <li class="list-group-item list-group-item-dark">其它</li>
            </ul>
          </div>
          <div class="col-3">
            <ul class="list-group list-group-flush" style="background-color: #d8e4ec">
              <li class="list-group-item list-group-item-dark" style="color: #959fa8">
                <h3 class="title fs-5" style="color: #404c58">解决方案</h3>
              </li>
              <li class="list-group-item list-group-item-dark">工厂智能平台</li>
              <li class="list-group-item list-group-item-dark">智能教育培训平台</li>
              <li class="list-group-item list-group-item-dark">智能房产</li>
              <li class="list-group-item list-group-item-dark">商城</li>
              <li class="list-group-item list-group-item-dark">其它</li>
            </ul>
          </div>
          <div class="col" style="margin-left: 50px">
            <ul class="list-group list-group-flush">
              <li class="list-group-item list-group-item-dark" style="font-size: 12px">
                联系我们
              </li>
              <li class="list-group-item list-group-item-dark" style="font-size: 12px">
                咨询电话：022-83717958 18622474586
              </li>
              <li class="list-group-item list-group-item-dark" style="font-size: 12px">
                商务合作：smingtech@smingtech.com
              </li>
              <li class="list-group-item list-group-item-dark" style="font-size: 12px">
                联系地址：天津市华苑产业园区兰苑路5号
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container d-flex" style="width: 900px">
        <div class="box d-flex mx-auto">
          <p style="margin-top: 5px; border-top: 1px solid black"></p>
          <span>
            <a
              href="#"
              style="
                text-decoration: none;
                color: #5b5b5b;
                font-size: 13px;
                margin-right: 10px;
              "
            >
              Copyright ©
            </a>
          </span>
          <span>
            <a
              href="#"
              style="
                text-decoration: none;
                color: #5b5b5b;
                font-size: 13px;
                margin-right: 10px;
              "
            >
              赛鸣科技有限公司
            </a>
          </span>
          <span>
            <a
              href="#"
              style="
                text-decoration: none;
                color: #5b5b5b;
                font-size: 13px;
                margin-right: 10px;
              "
            >
              版权所有
            </a>
          </span>
          <span>
            <a href="#" style="text-decoration: none; color: #5b5b5b; font-size: 13px">
              津ICP备16009197号-1
            </a>
          </span>
          <div style="margin-left: 50px; color: #5b5b5b; font-size: 13px">
            <img src="./images/首页切图/guohui_photo.png" alt="" />
            津公网安备案 12010202001266号
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <!--  -->
    <!-- byMy -->
    <script>
      var section1Col1 = document.getElementById("section1Col1");
      var cardBackText1 = document.getElementById("cardBackText1");
      section1Col1.onclick = displayCardBack();
      section1Col1.onmouseout = hiddenCardBack();
      // 显示
      function displayCardBack() {
        cardBackText1.style.display = "block";
      }
      // 隐藏
      function hiddenCardBack() {
        cardBackText1.style.display = "none";
      }
    </script>

    <!-- js -->
    <script src="./js/bootstrap.bundle.min.js"></script>
  </body>
</html>
